define([
    'jquery',
    'underscore',
    'backbone',
    //'jqueryui',
    'module/article/models/ArticleModel',
    'module/category/models/CategoryModel',
    'module/article/models/ArticleCollection',
    'module/article/views/List',
    'text!module/article/templates/main.html',
    'text!module/article/templates/add.html',
    'text!module/article/templates/edit.html',
    'text!module/article/templates/drop.html',
    'text!module/article/templates/add_imagen.html',
], function($, _, Backbone, /*jqueryui,*/ ArticleModel, CategoryModel, ArticleCollection, List, main, add, edit, drop, add_imagen) {

    var ArticleController = Backbone.View.extend({
        el: $("#page"),
        initialize: function() {
            this.render();
            this.list_view();

        },
        events: {
            "click #list_view": "list_view",
            "click #add_view": "add_view",
            "click #edit_view": "edit_view",
            "click #drop_view": "drop_view",
            "click #add_action": "add_action",
            "click #edit_action": "edit_action",
            "click #drop_action": "drop_action",
            "click #add_category_action": "add_category_action",
            "click #add_category_view": "add_category_view",
            "click #add_magen_view": "add_magen_view",
            "click #search": "search",
            "click #pag": "pag_action",
            "click #cancel_action": "cancel_action"
        },
        render: function() {
            this.$el.html(main);
        },
        list_view: function() {
            $.ajax({
                url: 'server/api/article/find_all/1',
                type: 'GET',
                dataType: "json",
                success: function(data) {
                    var collection = new ArticleCollection(data.result);
                    var list = new List({collection: collection, count: data.count});
                    list.render();
                }
            });


        },
        add_view: function() {
            $("#main-list").html(add);
            /*$("#dialog-modal").dialog({
             width: 550,
             modal: true,
             autoOpen: false,
             buttons: {
             "Agregar": function() {
             var category = new CategoryModel();
             var categoryDetails = {
             name: $("#category_name").val()
             };
             category.save(categoryDetails, {
             success: function(data) {
             
             }
             });
             $(this).dialog("close");
             },
             Cancel: function() {
             $(this).dialog("close");
             }
             }
             });*/
            $.ajax({
                url: 'server/api/category/find',
                type: 'GET',
                dataType: "json",
                success: function(data) {
                    $.each(data, function(i, item) {
                        var option = document.createElement('option');
                        $(option).val(item.id);
                        $(option).html(item.name);
                        $("#category_id").append(option);
                    });

                }
            });

            $.ajax({
                url: 'server/api/brand/find',
                type: 'GET',
                dataType: "json",
                success: function(data) {
                    $.each(data, function(i, item) {
                        var option = document.createElement('option');
                        $(option).val(item.id);
                        $(option).html(item.name);
                        $("#brand_id").append(option);
                    });

                }
            });

            $.ajax({
                url: 'server/api/unit/find',
                type: 'GET',
                dataType: "json",
                success: function(data) {
                    $.each(data, function(i, item) {
                        var option = document.createElement('option');
                        $(option).val(item.id);
                        $(option).html(item.name);
                        $("#unit_id").append(option);
                    });

                }
            });
        },
        edit_view: function(event) {
            $("#main-list").html(edit);
            var id = event.target.getAttribute('index');
            var article = new ArticleModel({id: id});
            article.fetch({
                success: function(data) {
                    data = data.toJSON();
                    $("#id").val(data.id);
                    $("#name").val(data.name);
                    $("#model").val(data.model);
                    $("#brand_id").val(data.brand_id);
                    $("#category_id").val(data.category_id);
                    $("#unit_id").val(data.unit_id);
                    $("#stock_minimun").val(data.stock_minimun);
                }
            });
            $.ajax({
                url: 'server/api/category/find',
                type: 'GET',
                dataType: "json",
                success: function(data) {
                    $.each(data, function(i, item) {
                        var option = document.createElement('option');
                        $(option).val(item.id);
                        $(option).html(item.name);
                        $("#category_id").append(option);
                    });

                }
            });

            $.ajax({
                url: 'server/api/brand/find',
                type: 'GET',
                dataType: "json",
                success: function(data) {
                    $.each(data, function(i, item) {
                        var option = document.createElement('option');
                        $(option).val(item.id);
                        $(option).html(item.name);
                        $("#brand_id").append(option);
                    });

                }
            });

            $.ajax({
                url: 'server/api/unit/find',
                type: 'GET',
                dataType: "json",
                success: function(data) {
                    $.each(data, function(i, item) {
                        var option = document.createElement('option');
                        $(option).val(item.id);
                        $(option).html(item.name);
                        $("#unit_id").append(option);
                    });

                }
            });
        },
        drop_view: function(event) {
            $("#main-list").html(drop);
            var id = event.target.getAttribute('index');
            var article = new ArticleModel({id: id});
            article.fetch({
                success: function(data) {
                    data = data.toJSON();
                    $("#id").val(data.id);
                    $("#name").val(data.name);
                }
            });
        },
        add_magen_view: function(event) {

            var id = event.target.getAttribute('index');
            var article = new ArticleModel({id: id});
            article.fetch({
                success: function(data) {
                    $("#name").val(article.get("name"));
                    $("#img").attr("src", "server/php/files/" + article.get("img"));
                }
            });
            var url = 'server/php/';
            var self = this;
            var name = "";
            $('#fileupload').fileupload({
                url: url,
                dataType: 'json',
                done: function(e, data) {

                    $.each(data.result.files, function(index, file) {
                        name = file.name;
                    });

                    article.set("img", name);
                    article.save({
                        success: function(data) {
                            alert("fin");
                        }
                    });
                },
                progressall: function(e, data) {
                    var progress = parseInt(data.loaded / data.total * 100, 10);
                    $('#progress .bar').css('width', progress + '%');
                }
            }).prop('disabled', !$.support.fileInput).parent().addClass($.support.fileInput ? undefined : 'disabled');





        },
        add_action: function() {
            var self = this;
            var article = new ArticleModel();
            var articleDetails = {
                //code: $("#code").val(),
                name: $("#name").val(),
                model: $("#model").val(),
                brand_id: $("#brand_id option:selected").val(),
                category_id: $("#category_id option:selected").val(),
                unit_id: $("#unit_id option:selected").val(),
                stock_minimun: $("#stock_minimun").val()
                        //price: $("#price").val()
            };
            article.save(articleDetails, {
                success: function(data) {
                    self.list_view();
                }
            });
        },
        edit_action: function() {
            var self = this;
            var article = new ArticleModel();
            var articleDetails = {
                id: $("#id").val(),
                name: $("#name").val(),
                model: $("#model").val(),
                brand_id: $("#brand_id option:selected").val(),
                category_id: $("#category_id option:selected").val(),
                unit_id: $("#unit_id option:selected").val(),
                stock_minimun: $("#stock_minimun").val()
            };
            article.save(articleDetails, {
                success: function(data) {
                    self.list_view();
                }
            });
        },
        drop_action: function() {
            var self = this;
            var article = new ArticleModel({
                id: $("#id").val()
            });
            article.destroy({
                success: function(data) {
                    self.list_view();
                }
            });
        },
        search: function() {
            var search = $('#txt_search').val();
            $.ajax({
                url: 'server/api/article/search/' + search,
                type: 'GET',
                dataType: "json",
                success: function(data) {
                    var collection = new ArticleCollection(data.result);
                    var list = new List({collection: collection, count: data.count});
                    list.render();
                }
            });
        },
        pag_action: function(event) {
            var id = event.target.getAttribute('index');
            $.ajax({
                url: 'server/api/article/find_all/' + id,
                type: 'GET',
                dataType: "json",
                success: function(data) {
                    var collection = new ArticleCollection(data.result);
                    var list = new List({collection: collection, count: data.count});
                    list.render();
                }
            });
        },
        add_category_action: function() {
            $("#dialog-modal").dialog("open");
        },
        add_category_view: function() {
            $("#dialog-modal").dialog("open");
        },
        cancel_action: function() {
            this.list_view();
        }
    });
    return ArticleController;
});
